<link href="/css/explorer.css" rel="stylesheet" type="text/css" />
<script src="/js/explorer.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        ko.applyBindings(new ExplorerViewModel());
    });
</script>
<div data-bind="explorer:{}" class="easyui-layout" data-options="fit:true">
    <div data-options="region:'north'" style="height: 28px;">
        <span class="tree-icon tree-folder"></span>&nbsp;<input data-bind="value:path" type="text" style="width:70%;" />
        <select title="Change your view" data-bind="options:views,optionsText:'text',value:selectedView,event:{change:changeView}">
        </select>
    </div>
    <div data-options="region:'west',split:true" style="width: 220px;">
        <ul data-bind="tree:{}">
        </ul>
    </div>
    <div data-options="region:'center'" data-bind="foreach:files,view:{}">
        <div data-bind="icon:$data">
        </div>
    </div>
    <div data-options="region:'south'" style="height: 28px;">
        File&nbsp;<input data-bind="value:fileName" type="text" style="width: 92%;" />
    </div>
</div>
